<template>
  <div id="app">
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div> -->
    <span class="text">ABCDEF</span>
    <router-view/>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
const getters = {
  a: () => 1,
  b: () => 2
}

function fn (keys) {
  /* return {
    a: () => 1,
    b: () => 2
  } */
  const data = {}
  keys.forEach(key => {
    if (Object.prototype.hasOwnProperty.call(getters, key)) {
      data[key] = getters[key]
    }
    // if (getters.hasOwnProperty(key)) {
    //   data[key] = getters[key]
    // }
  })

  return data
}

export default {
  computed: {
    ...mapGetters(['test']),
    ...fn(['a', 'b', 'c'])
  },
  mounted () {
    this.$store.dispatch('setTest', 10).then(() => {
      // console.log(this.$store.state.book.test)
      // console.log(this.test)
      console.log(this.a, this.b)
    })
  }
}
document.addEventListener('DOMContentLoaded', () => {
  const html = document.querySelector('html')
  let fontSize = window.innerWidth / 10
  fontSize = fontSize > 50 ? 50 : fontSize
  html.style.fontSize = fontSize + 'px'
})

</script>
<style lang="scss" scoped>
  @import "./assets/styles/global.scss";
  .text{
    font-family: 'Days One';
    /* font-size: 1rem; */
    font-size: px2rem(20);
    color: aqua;
  }
</style>
